import React from 'react';
import Termial from './components/Termial';
import styles from './index.module.less';
import ThemeToggle from './components/ThemeToggle';

const Home: React.FC = () => {
  return (
    <div className={styles.homeContainer}>
      {/* 顶部区域 - 终端和主题切换 */}
      <div className={styles.topSection}>
        <div className={styles.terminalWrapper}>
          <Termial />
        </div>
        <div className={styles.themeToggleWrapper}>
          <ThemeToggle />
        </div>
      </div>
      {/* 主要内容区域 */}
      <div className={styles.mainContent}>
        <div className={styles.heroSection}>
          <div className={styles.titleContainer}>
            <h1 className={styles.mainTitle}>
              <span className={styles.greeting}>Hello, I'm</span>
              <span className={styles.name}>Shiliang</span>
            </h1>
            <p className={styles.subtitle}>
              热爱技术，追求创新，用代码构建美好世界
            </p>
          </div>

          <div className={styles.features}>
            <div className={styles.feature}>
              <div className={styles.featureIcon}>🚀</div>
              <h3>前端开发</h3>
              <p>React, Vue, TypeScript</p>
            </div>
            <div className={styles.feature}>
              <div className={styles.featureIcon}>⚡</div>
              <h3>后端技术</h3>
              <p>Node.js, Python, Go</p>
            </div>
            <div className={styles.feature}>
              <div className={styles.featureIcon}>🎨</div>
              <h3>UI/UX 设计</h3>
              <p>用户体验与界面设计</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;
